// /**
////  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
// *
// * @category design
// * @copyright Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
// * @license http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
// */

//  # Pagination HTML markup
//  Pagination is used to display numbers of pages in case content exceeds page limits. The markup corresponds to accesibility demands.
//
//  Required HTML markup:
//  ```html
//  <div class="pages">
//      <strong class="label" id="paging-label">Page</strong>
//      <ul class="items" aria-labelledby="paging-label">
//          <li class="item">
//              <a href="1" class="action previous">
//                  <span class="label">Page</span>
//                  <span>Previous</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>1</span>
//              </a>
//          </li>
//          <li class="item current">
//              <strong class="page">
//                  <span class="label">You're currently reading page</span>
//                  <span>2</span>
//              </strong>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>3</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="action next">
//                  <span class="label">Page</span>
//                  <span>Next</span>
//              </a>
//          </li>
//      </ul>
//  </div>
//  ```

.pages {
    .pager();
}

//  # Pagination variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-label-display</th>
//            <td class="vars_value">none</td>
//            <td class="vars_value">none | block | inline-block</td>
//            <td>The 'page' label is displayed</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-item-display</th>
//            <td class="vars_value">inline-block</td>
//            <td class="vars_value">none | block | inline-block</td>
//            <td>The pager item label is displayed</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-reset-spaces</th>
//            <td class="vars_value">true</td>
//            <td class="vars_value">true | false</td>
//            <td>reset spaces between inline-block elements if elements 'display' is set to 'inline-block'</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-font-size</th>
//            <td class="vars_value">@font-size-s</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager font size</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-font-weight</th>
//            <td class="vars_value">@font-weight-base</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager font weight</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-line-height</th>
//            <td class="vars_value">32px</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager line height</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-item-margin</th>
//            <td class="vars_value">0 1px</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item margin</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-item-padding</th>
//            <td class="vars_value">0 10px</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item padding</td>
//        </tr>
//        <tr>
//            <th>@_pager-actions-padding</th>
//            <td class="vars_value">0</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager actions padding</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Pager current page</th>
//        </tr>
//        <tr>
//            <th>@_pager-current-font-weight</th>
//            <td class="vars_value">@font-weight-bold;</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>current page number font weight</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-color</th>
//            <td class="vars_value">@color-primary</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>current page number color</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-border</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>current page number border</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-background</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>current page number background</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-gradient</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">true | false</td>
//            <td>current page number has gradient background</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-gradient-direction</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | vertical | horizontal</td>
//            <td>direction of current page number background gradient (if there is any)</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-gradient-start-color</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>current page number gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-gradient-end-color</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>current page number gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Link to page number</th>
//        </tr>
//        <tr>
//            <th>@_pager-gradient</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">true | false</td>
//            <td>pager items have gradient background</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-direction</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | vertical | horizontal</td>
//            <td>direction of background gradient (if there is any) of pager item</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Link to page number - default</th>
//        </tr>
//        <tr>
//            <th>@_pager-color</th>
//            <td class="vars_value">@link-color</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item color</td>
//        </tr>
//        <tr>
//            <th>@_pager-border</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item border</td>
//        </tr>
//        <tr>
//            <th>@_pager-text-decoration</th>
//            <td class="vars_value">none</td>
//            <td class="vars_value">none | underline</td>
//            <td>pager item text decoration</td>
//        </tr>
//        <tr>
//            <th>@_pager-background</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item background</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-start-color</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-end-color</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Link to page number - visited</th>
//        </tr>
//        <tr>
//            <th>@_pager-color-visited</th>
//            <td class="vars_value">@link-color-visited</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item visited color</td>
//        </tr>
//        <tr>
//            <th>@_pager-border-visited</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item visited border</td>
//        </tr>
//        <tr>
//            <th>@_pager-background-visited</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item visited background</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-start-color-visited</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item visited gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-end-color-visited</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item visited gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Link to page number - hover</th>
//        </tr>
//        <tr>
//            <th>@_pager-color-hover</th>
//            <td class="vars_value">@link-color-hover</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item hover color</td>
//        </tr>
//        <tr>
//            <th>@_pager-border-hover</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item hover border</td>
//        </tr>
//        <tr>
//            <th>@_pager-text-decoration-hover</th>
//            <td class="vars_value">none</td>
//            <td class="vars_value">none | underline</td>
//            <td>pager item hover text decoration</td>
//        </tr>
//        <tr>
//            <th>@_pager-background-hover</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item hover background</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-start-color-hover</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item hover gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-end-color-hover</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item hover gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Link to page number - active</th>
//        </tr>
//        <tr>
//            <th>@_pager-color-active</th>
//            <td class="vars_value">@link-color-hover</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item active color</td>
//        </tr>
//        <tr>
//            <th>@_pager-border-active</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item active border</td>
//        </tr>
//        <tr>
//            <th>@_pager-background-active</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item active background</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-start-color-active</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item active  gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-end-color-active</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager item active  gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Previous/next action links</th>
//        </tr>
//        <tr>
//            <th>@_pager-action-gradient</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">true | false</td>
//            <td>previous/next links have gradient background</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-gradient-direction</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | vertical | horizontal</td>
//            <td>direction of background gradient (if there is any) of previous/next links</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Previous/next action links - icons</th>
//        </tr>
//        <tr>
//            <th>@_pager-icon-use</th>
//            <td class="vars_value">true</td>
//            <td class="vars_value">true | false</td>
//            <td>previous/next links have icons</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-previous-content</th>
//            <td class="vars_value">@icon-pointer-left</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>&quot;previous&quot; link icon</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-next-content</th>
//            <td class="vars_value">@icon-pointer-right</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>&quot;next&quot; link icon</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-text-hide</th>
//            <td class="vars_value">true</td>
//            <td class="vars_value">true | false</td>
//            <td>the &quot;previous&quot; and &quot;next&quot; words are hidden</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-position</th>
//            <td class="vars_value">before</td>
//            <td class="vars_value">before | after</td>
//            <td>icon position</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-font</th>
//            <td class="vars_value">@icon-font</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>icon font</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-font-margin</th>
//            <td class="vars_value">@icon-margin</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>icon font margin</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-font-vertical-align</th>
//            <td class="vars_value">top</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>icon font vertical align</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-font-size</th>
//            <td class="vars_value">32px</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>icon font size</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-font-line-height</th>
//            <td class="vars_value">@icon-font-line-height</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>icon font line height</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Previous/next action links - default</th>
//        </tr>
//        <tr>
//            <th>@_pager-action-color</th>
//            <td class="vars_value">@pager-color</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-border</th>
//            <td class="vars_value">1px solid @border-color-base</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action border</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-text-decoration</th>
//            <td class="vars_value">@pager-text-decoration</td>
//            <td class="vars_value">none | underline</td>
//            <td>pager action text decoration</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-background</th>
//            <td class="vars_value">@pager-background</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action background</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-gradient-start-color</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-gradient-end-color</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Previous/next action links - visited</th>
//        </tr>
//        <tr>
//            <th>@_pager-action-color-visited</th>
//            <td class="vars_value">@pager-color-visited</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action visited color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-border-visited</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action visited border</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-background-visited</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action visited background</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-action-gradient-start-color-visited</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action visited gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-gradient-end-color-visited</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action visited gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Previous/next action links - hover</th>
//        </tr>
//        <tr>
//            <th>@_pager-action-color-hover</th>
//            <td class="vars_value">@pager-color-hover</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action hover color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-border-hover</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action hover border</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-text-decoration-hover</th>
//            <td nowrap="nowrap">@pager-text-decoration-hover</td>
//            <td class="vars_value">none | underline</td>
//            <td>pager action hover text decoration</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-background-hover</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action hover background</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-action-gradient-start-color-hover</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action hover gradient start color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-action-gradient-end-color-hover</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action hover gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Previous/next action links - active</th>
//        </tr>
//        <tr>
//            <th>@_pager-action-color-active</th>
//            <td class="vars_value">@pager-color-active</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action active color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-border-active</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action active border</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-background-active</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action active background</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-action-gradient-start-color-active</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action active gradient start color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-action-gradient-end-color-active</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>pager action active gradient end color</td>
//        </tr>
//      </table>
//  </pre>

//  # Pagination with label and gradient background on links
//
//  To display label set:
//  ```css
//  @_pager-label-display: inline-block
//  ```
//  To set up gradient background on pages numbers use:
//  ```css
//  @_pager-gradient: true
//  ```
//  To set gradient start and end colors for default and hovered link states use:
//  ```css
//  @_pager-gradient-start-color: #f4f4f4
//  @_pager-gradient-end-color: #ccc
//  @_pager-gradient-start-color-hover: #ccc
//  @_pager-gradient-end-color-hover: #f4f4f4
//  ```
//  To set an icon on "previous" and "next" links use:
//  ```css
//  @_pager-icon-use: true
//  @_pager-icon-previous-content: @icon-prev
//  @_pager-icon-next-content: @icon-next
//  ```
//  ```html
//  <div class="example-pages-1">
//      <strong class="label" id="paging-label">Page</strong>
//      <ul class="items" aria-labelledby="paging-label">
//          <li class="item">
//              <a href="1" class="action previous">
//                  <span class="label">Page</span>
//                  <span>Previous</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>1</span>
//              </a>
//          </li>
//          <li class="item current">
//              <strong class="page">
//                  <span class="label">You're currently reading page</span>
//                  <span>2</span>
//              </strong>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>3</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="action next">
//                  <span class="label">Page</span>
//                  <span>Next</span>
//              </a>
//          </li>
//      </ul>
//  </div>
//  ```

.example-pages-1 {
    .pager(
        @_pager-font-size: 12px,
        @_pager-label-display: inline-block,
        @_pager-item-margin: 0 3px,
        @_pager-gradient: true,
        @_pager-gradient-direction: vertical,
        @_pager-color: #333,
        @_pager-gradient-start-color: #f4f4f4,
        @_pager-gradient-end-color: #ccc,
        @_pager-border: 1px solid darken(#ccc, 10%),
        @_pager-color-hover: #333,
        @_pager-gradient-start-color-hover: #ccc,
        @_pager-gradient-end-color-hover: #f4f4f4,
        @_pager-border-hover: 1px solid darken(#ccc, 20%),
        @_pager-action-gradient: false,
        @_pager-current-color: #f7b32e,
        @_pager-current-border: 1px solid darken(#1979c3, 10%),
        @_pager-current-background: #1979c3,
        @_pager-icon-use: true,
        @_pager-icon-previous-content: @icon-prev,
        @_pager-icon-next-content: @icon-next,
        @_pager-icon-font-size: 30px,
        @_pager-action-color-hover: #ff5501
    );
}

//  # Pagination with "previous"..."next" text links and label
//
//  Text view of pagination without borders, backgrounds and icons
//
//  Disable icon use for "previous" and "next" links
//  ```css
//  @_pager-icon-use: false
//  ```
//  Display pager label
//  ```css
//  @_pager-label-display: inline-block
//  ```
//  ```html
//  <div class="example-pages-2">
//     <strong class="label" id="paging-label">Page</strong>
//      <ul class="items" aria-labelledby="paging-label">
//          <li class="item">
//              <a href="1" class="action previous">
//                  <span class="label">Page</span>
//                  <span>Previous</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>1</span>
//              </a>
//          </li>
//          <li class="item current">
//              <strong class="page">
//                  <span class="label">You're currently reading page</span>
//                  <span>2</span>
//              </strong>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>3</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="action next">
//                  <span class="label">Page</span>
//                  <span>Next</span>
//              </a>
//          </li>
//      </ul>
//  </div>
//  ```

.example-pages-2 {
    .pager(
        @_pager-label-display: inline-block,
        @_pager-icon-use: false
    );
}

//  # Pagination without label, with solid background
//
//  Pagination without label, with solid background and icons on previous/next links
//
//  Hide pager label:
//  ```css
//  @_pager-label-display: none
//  ```
//  To set background and font colors for default, visited, hover, active states, use:
//  ```css
//  @_pager-color: #fff,
//  @_pager-background: @link-color,
//  @_pager-color-visited: #fff,
//  @_pager-background-visited: @link-color-visited,
//  @_pager-color-hover: #fff,
//  @_pager-background-hover: @link-color-hover,
//  @_pager-color-active: #fff,
//  @_pager-background-active: @link-color-active,
//  @_pager-current-color: #fff,
//  @_pager-current-background: @link-color-visited,
//  @_pager-action-background: @link-color,
//  @_pager-icon-font-color: #fff,
//  @_pager-action-background-visited: @link-color-visited
//  ```
//  To set current page background and font color, use:
//  ```css
//  @_pager-current-color: #fff,
//  @_pager-current-background: @link-color-visited
//  ```
//  To set background and icon color for default, visited, hover, active states of "previous" and "next" links, use:
//  ```css
//  @_pager-action-background: @link-color,
//  @_pager-action-background-visited: @link-color-visited,
//  @_pager-action-background-hover: @link-color-hover,
//  @_pager-action-background-active: @link-color-active,
//
//  @_pager-icon-font-color: #fff,
//  @_pager-icon-font-color-visited: #fff,
//  @_pager-icon-font-color-hover: #fff,
//  @_pager-icon-font-color-active: #fff
//  ```
//
//  ```html
//  <div class="example-pages-3">
//      <strong class="label" id="paging-label">Page</strong>
//      <ul class="items" aria-labelledby="paging-label">
//          <li class="item">
//              <a href="1" class="action previous">
//                  <span class="label">Page</span>
//                  <span>Previous</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>1</span>
//              </a>
//          </li>
//          <li class="item current">
//              <strong class="page">
//                  <span class="label">You're currently reading page</span>
//                  <span>2</span>
//              </strong>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>3</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="action next">
//                  <span class="label">Page</span>
//                  <span>Next</span>
//              </a>
//          </li>
//      </ul>
//  </div>
//  ```

.example-pages-3 {
    .pager(
        @_pager-label-display: none,
        @_pager-color: #fff,
        @_pager-background: @link-color,
        @_pager-color-visited: #fff,
        @_pager-background-visited: @link-color-visited,
        @_pager-color-hover: #fff,
        @_pager-background-hover: @link-color-hover,
        @_pager-color-active: #fff,
        @_pager-background-active: @link-color-active,
        @_pager-current-color: #fff,
        @_pager-current-background: @link-color-visited,
        @_pager-action-background: @link-color,
        @_pager-action-background-visited: @link-color-visited,
        @_pager-action-background-hover: @link-color-hover,
        @_pager-action-background-active: @link-color-active,
        @_pager-action-color: #fff,
        @_pager-action-color-hover: #fff,
        @_pager-action-color-active: #fff
    );
}
